<template>

  <div id="ReleaseyDnamics_container">

    <!-- 顶部导航栏 -->
    <div class="nav-contianer">
      <van-nav-bar
        title="发布动态"
        @click-right="afterRead({fileList},$event)"
      >
        <template #right>
          <van-icon name="plus" size="18" color="white"/>
        </template>
      </van-nav-bar>
    </div>

    <!-- 内容栏 -->
    <div>
      <!-- 留言 -->
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="分享精彩"
        show-word-limit
      />

      <!-- 图片上传 -->
      <van-uploader v-model="fileList" multiple>
      </van-uploader>

      <div id="fbbox">
        <van-cell title="所在位置" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="提醒谁看" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="谁可以看" value="公开" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import axios from 'axios'
// import { dtsend } from '@/api/user'

export default {
  name: 'ReleaseyDnamics',
  data() {
    return {
      value: '',
      message: '',
      a: 1,
      personal_Info: '', // 保存本地获取的用户信息
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      data: {
        username: '',
        userpic: '',
        text: '',
        imglist: ''
      }

    }
  },
  computed: {
    ...mapState(['CreateLeague', 'displayimg', 'displayimg1'])
  },
  components: {

  },
  methods: {
    afterRead(file) {
      this.personal_Info = window.localStorage.getItem('user_info')// 获取本地用户信息
      this.data.username = this.personal_Info.name
      this.data.userpic = this.personal_Info.user_pic

      this.data.text = this.message
      this.data.imglist = this.fileList
      this.displayimg.splice(0, 0, this.data)
      this.displayimg1.splice(0, 0, this.data)
      // 将上传的图片发送到服务器端
      // const token = window.localStorage.getItem('token')
      // dtsend(token, this.fileList).then(res => {
      //   // 将服务器的图片保存到vuex进行渲染
      //   this.$store.state.displayimg1 = res
      // })
    }

  }

}
</script>

<style scoped>
/* #Switch_League_container{
  background-color: rgb(240, 240, 240);
} */
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
.van-nav-bar{
  height: 12vw;
  background-color: black;
}
::v-deep .van-icon-arrow-left,::v-deep .van-nav-bar__text,::v-deep .van-nav-bar__title,::v-deep .van-nav-bar__text{
  color: white;
}
.container_box{
  background-color: rgb(240, 240, 240);
  height: 13vw;
  margin-top: 2vw;
}
.container_box div{
  float: left;
}
.box_center{
  width: 70%;
}
span{
  font-size: 3vw;
}
.box_center span{
  display: inline-block;
  width: 100%;
  height: 12vw;
  line-height: 12vw;
  /* background-color:brown; */
  margin-left: 3vw;
}

.box_left,.box_right{
  width: 15%;
  height: 12vw;
  line-height: 12vw;
  /* background-color: aqua; */
}
.box_left{
  position: relative;
}
.van-image{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.box_right{
  float: right;
}
#fbbox{
  margin-top: 5vw;
}
::v-deep .search-icon{
  margin-top: 1.5vw;
}
</style>
